<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
</script>

<template>

  <HeaderView />

  <div class="container-container">
    <div class="navigation">
      <h2>Clothing</h2>
      <nav>
        <router-link to="/Clothing" class="on">All</router-link>
        <router-link to="/Clothing">Women's</router-link>
        <router-link to="/Clothing">Men's</router-link>
        <router-link to="/Clothing">Children's</router-link>
      </nav>
    </div>

    <div class="container-container-wrap">

      <router-link to="/Details">
        <el-image src="/temp/clothing-1.jpg" />
        <h3>$761.00</h3>
        <p>Squareneck button-back top in linen</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-2.jpg" />
        <h3>$1029.50</h3>
        <p>Marina sweater in textured cotton blend</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-3.jpg" />
        <h3>$42.50</h3>
        <p>Drop-waist mixy dress</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-4.jpg" />
        <h3>$1402.00</h3>
        <p>Oversized cashmere wrap</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-5.jpg" />
        <h3>$1085.00</h3>
        <p>Cabana dress in linen</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-6.jpg" />
        <h3>$1422.00</h3>
        <p>Featherweight cashmere-blend cropped sweater shell</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-7.jpg" />
        <h3>$1599.00</h3>
        <p>Cashmere shrunken crewneck sweater</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-8.jpg" />
        <h3>$837.00</h3>
        <p>Alpaca-blend oversized sweater T-shirt</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-9.jpg" />
        <h3>$680.00</h3>
        <p>End-on-end cotton long-sleeve pajama set</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-3.jpg" />
        <h3>$42.50</h3>
        <p>Drop-waist mixy dress</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="/temp/clothing-4.jpg" />
        <h3>$1402.00</h3>
        <p>Oversized cashmere wrap</p>
      </router-link>

      <router-link to="/Details">
        <el-image src="temp/clothing-5.jpg" />
        <h3>$1085.00</h3>
        <p>Cabana dress in linen</p>
      </router-link>

    </div>

  </div>

  <FooterView class="footer" />

</template>

<script lang="ts">

export default {
  data() {
    return {
      pageTitle: 'Clothing'
    };
  },
  created() {
    this.updateTitle();
  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    }
  }

}
</script>

<style>
.container-container {
  .navigation {
    display: flex;
    justify-content: flex-start;
    line-height: 30px;
    padding: 0 0 20px 0;
    h2 {
      padding-right: 30px;
    }
    nav {
    font-size: 16px;
    a {
      display: inline-block;
      padding:0 20px;
      margin:0 30px 0 0;
      background-color: #fafafa;
      border: 1px solid #fafafa;
    }
    a.on {
      border: 1px solid #333;
      background-color: #ffffff;
      color: #333;
    }
    a:hover {
      border: 1px solid #333;
      color: #333;
    }
  }
  }
  .container-container-wrap {
    padding-bottom: 60px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -1%;margin-right: -1%;
    a {
      display: inline-block;
      padding: 30px 0;
      width: 23%;
      padding: 0;
      margin: 1%;
      img {
        width: 100%;
      }
      h3 {
        line-height: 40px;
        padding: 0px 5% 0 5%;
        font-size: 26px;
        background-image: linear-gradient(to right, #f41cb2, #f25511) !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
      }
      p {
        font-size: 16px;
        line-height: 24px;
        padding:0 5% 20px 5%;
      }
    }
    a:hover {
      -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      background-color: #fff;
    }
  }

}
@media only screen and (max-width: 1000px) {
  .container-container {
    max-width: 90%;
    min-width: 90%;
    width: 90%;
    margin-top: 100px;
    padding: 0;
    .navigation {
      padding: 0;
      display:block;
      h2 {
        padding: 12px 0;
        font-size: 18px;
      }
      nav {
        display: flex;
        position: absolute;
        overflow-x: auto;
        width: 95%;
        a {
          margin: 0 14px 0 0;
          padding: 6px 12px;
        }
      }
      nav::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .container-container-wrap {
    padding-top: 60px;
    padding-bottom: 20px !important;
    justify-content: space-between !important;
    a {
      width: 46% !important;
      .el-image {
        width: 100%;
        img {
          height: 100%;
        }
      }

    }
    a:hover {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)  !important;
      box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
    }
  }
  .footer {
    display: none;
  }
}
</style>
